<template>
    <div :class='$style.container' @click.stop='click'>
        <slot></slot>
        <template v-if='loading'>
            <span :class='$style.loading'>
                <span :class='$style.wrap'>
                    <span class='el-icon-loading'></span>
                </span>
            </span>
        </template>
    </div>
</template>

<script lang='ts'>
    import { reactive, toRefs } from 'vue'
    import { ElMessageBox } from 'element-plus'

    const Props = {
        click : {
            type : Function
        },

        isConfirm : Boolean,
        confirmText : String,

        title : {
            type : String
        }
    }

    export default {
        props : Props,
        setup(props : any) {
            const state = reactive({
                loading : false
            })

            const methods = {
                async click() {
                    if(state.loading) return
                    if(props.isConfirm) {
                        ElMessageBox.confirm!(props.confirmText, '提示', {
                            confirmButtonText : '确定',
                            cancelButtonText : '取消',
                            type : 'warning'
                        }).then(() => {
                            methods.doClick()
                        }).catch(() => {
                            
                        })
                    }else {
                        methods.doClick()
                    }
                    
                },

                async doClick() {
                    state.loading = true
                    try {
                        await props.click()
                    } catch (error) {
                        
                    }
                    state.loading = false
                }
            }
            return {
                ...toRefs(state),

                ...methods
            }
        }
    }
</script>

<style scoped module lang='scss'>
    .container{
        display: inline-block;
        position: relative;
        
        .loading {
            position: absolute;
            z-index: 10;
            left: 0;
            top: 0;
            width:100%;
            height: 100%;
            cursor: not-allowed;
            background: rgba($color: #000000, $alpha: 0.5);

            .wrap{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
            }
        }

    }
</style>